<template>
  <h2>我的购物车</h2>
  <br>
  <el-table :data="BookList" ref="bookTableRef" style="width: 100%" @selection-change="handleSelect" empty-text="没有小主的商品记录呢！快去添加心仪的商品进入购物车吧！">
    <el-table-column type="selection" width="50"/>
    <el-table-column label="店铺名称" width="280">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><location /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="参考图片" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center" >
          <el-image :src="this.staticResourcesUrl+scope.row.img" fit="cover" style="max-height: 50px">
            <template #error>
              <div class="image-slot">
                <el-icon><picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品名" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.commodityName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品单价" width="120">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品数量" width="120">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.count }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品总价" width="120">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.totalPrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="right">
          <template #default>
            <div>移除</div>
          </template>
          <template #reference>
            <el-button @click="delBookItem(scope.row.uuid)" type="danger" size="small" circle ><el-icon><delete /></el-icon></el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="clearShopCar" :disabled="!BookList.length>0" type="danger" round style="margin: 20px">清空购物车</el-button>
  <el-button @click="selectAddress" :disabled="!SelectList.length>0" type="primary" round style="margin: 20px">提交订单</el-button>
  <SelectAddress :dialog-form-visible=dialogFormVisible @closeDialog="closeDialog" @commitBook="commitBook"></SelectAddress>
</template>

<script>
import { getCurrentInstance } from 'vue'
import request from "@/http/request";
import SelectAddress from "@/components/dialog/SelectAddress";

export default {
  name: "ShopCar",
  components: {
    SelectAddress,
  },
  data() {
    return {
      BookList: [],
      SelectList: [],
      dialogFormVisible: false,
    }
  },
  methods: {
    getBookList() {
      request({
        url: "/book/getPriceAndCount",
        method: "post",
        data:{
          list: this.$store.state.BookList,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.BookList = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    delBookItem(uuid) {
      this.BookList.map((item)=>{
        if (item.uuid === uuid) {
          this.BookList.splice(this.BookList.indexOf(item), 1);
        }
      });
      this.$store.commit("delBookItem", uuid);
    },
    handleSelect() {
      this.SelectList.length = 0;
      this.$refs.bookTableRef.getSelectionRows().map((item)=>{
        this.SelectList.push({uuid: item.uuid, count: item.count})
      })
    },
    clearShopCar() {
      this.$store.commit("clearBookList");
      this.BookList.length = 0;
    },
    selectAddress() {
      this.dialogFormVisible = true;
    },
    commitBook(addressID) {
      if (addressID == null || addressID === '') {
        this.$tipUtil.errTip("您还未选择收货地址");
      } else {
        request({
          url: "/book/submitBook",
          method: "post",
          data:{
            list: this.SelectList,
            addressID: addressID,
          }
        }).then((response) => {
          if (response.code === 200) {
            this.$tipUtil.successTip(response.msg);
            this.$refs.bookTableRef.getSelectionRows().map((item)=>{
              this.delBookItem(item.uuid);
            })
          } else {
            this.$tipUtil.errTip(response.msg);
          }
        })
      }
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
  },
  setup(){
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    return {
      staticResourcesUrl,
    }
  },
  mounted() {
    this.getBookList();
  }
}
</script>

<style scoped>

</style>